import * as React from 'react';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardMedia from '@material-ui/core/CardMedia';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Input from '@material-ui/core/Input';
import Footer from './Footer';
import Header from './Header';


const useStyles = theme => ({
  icon: {
    marginRight: theme.spacing(2),
  },
  toolbar: {
    justifyContent:"center"
  },
  heroContent: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(3, 0, 3),
  },
  heroButtons: {
    marginTop: theme.spacing(0),
  },
  cardGrid: {
    paddingTop: theme.spacing(8),
    paddingBottom: theme.spacing(8),
  },
  card: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  cardMedia: {
    paddingTop: '56.25%', // 16:9
  },
  footer: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(3),
  },
  cardActions: {
    justifyContent: 'center',
  }
});


class App extends React.Component {

  state = {
    rtspUrl: ['','','','','','','',''],
    isLoaded: true,
  }

  rtspChange = (e) => {
    const rtsp = this.state.rtspUrl
    rtsp[e.target.name -1] = e.target.value
    this.setState({
      rtspUrl: rtsp
    })
  }

  boot = (e) => {
    console.log(333)
      fetch("http://localhost/boot",{
          method: 'POST',
          body: JSON.stringify(this.state.rtspUrl),
          headers: new Headers({
            'Content-Type': 'application/json'
          })
        }
      )
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        (error) => {
          this.setState({
            isLoaded: true
          });
        }
      )
  }

  stop = (e) => {
    console.log(JSON.stringify(this.state.rtspUrl))
    //   fetch("http://127.0.0.1/stop",{
    //     method: 'POST',
    //     body: "",
    //     headers: new Headers({
    //       'Content-Type': 'application/json'
    //     })
    //   }
    // )
    // .then(res => res.json())
    // .then(
    //   (result) => {
    //     this.setState({
    //       isLoaded: true,
    //       items: result.items
    //     });
    //   },
    //   (error) => {
    //     this.setState({
    //       isLoaded: true
    //     });
    //   }
    // )
  }

  render(){
    const { classes } = this.props;
    const cards = [1, 2, 3, 4, 5, 6, 7, 8,];

    return (
      <React.Fragment>
        <CssBaseline />
        <Header />
        <main>
          {/* Hero unit */}
          <div className={classes.heroContent}>
            <Container maxWidth="lg">
              {/* <Typography variant="h5" align="center" color="textSecondary" paragraph>
                aaaaaa
              </Typography> */}
              <div className={classes.heroButtons}>
                <Grid container spacing={8} justifyContent="center">
                  <Grid item>
                    <Button variant="contained" onClick={this.boot}>全部启动</Button>
                  </Grid>
                  <Grid item>
                    <Button variant="outlined" onClick={this.stop}>全部暂停</Button>
                  </Grid>
                </Grid>
              </div>
            </Container>
          </div>
          <Container className={classes.cardGrid} maxWidth="xl">
            {/* End hero unit */}
            <Grid container spacing={4}>
              {cards.map((card) => (
                <Grid item key={card} xs={12} sm={6} md={3}>
                  <Card className={classes.card}>
                    <CardMedia
                      className={classes.cardMedia}
                      image="https://source.unsplash.com/random"
                    />
                    <CardActions className={classes.cardActions}>
                      <Input type="text" color="secondary" 
                      name={card.toString()} 
                      placeholder="rtsp地址" 
                      value={this.state.rtspUrl[card - 1]}
                      onChange={this.rtspChange}/>
                      <Button size="small" variant="outlined" >提交</Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Container>
        </main>
        <footer className={classes.footer}>
          <Footer />
        </footer>
      </React.Fragment>
    );
  }
}

export default withStyles(useStyles)(App)